<template> 
  <div class="cont">
    <div class="logo">
      <ul>
        <li class="iconfont">
          <img
            src=""
            alt=""
          />
        </li>
        <li>
          <img
            src=""
            alt=""
          />
        </li>
        <li class="iconfont">&#xe745;</li>
        <li class="iconfont">&#xe63f;</li>
        <li class="iconfont">&#xe66b;</li>
      </ul>
    </div>   
    <div class="xiangqing">
    <div class="imgs">
        <img :src="image" alt="">
    </div>
    <div class="wzms">
        <h3 class="price">￥{{price}}</h3>
        <span class="market">门市价：￥<s>{{market}}</s></span>

        <span class="sales">已售{{sales}}件
       <span class="third">
            <span class="tubiao"><svg t="1623053475778" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3426" width="13" height="19"><path d="M428.6 924.2L96 619.5l67.8-74L328.2 696V110.3h100.4zM695.8 913.7H595.4V99.8L928 404.5l-67.8 74L695.8 328z" fill="#333333" p-id="3427"></path></svg></span>
          <span class="thirda">对比</span>
          </span></span>
        <h1 class="title">{{title}}</h1>
        <h2 class="description">{{description}}</h2>
    </div>
    <div>
      <img src="https://static-upyunmall.health.ikang.com/image/h5/20210425/188c8cb9fa074294bf0cc2a4af460fcf.jpg" alt="">
      <img src="https://static-upyunmall.health.ikang.com/image/h5/20210425/533c0cfa3d3649849997e105e5d897e5.jpg" alt="">
    </div>
    </div>
 <div>
   <div class="kami">购买卡密</div>
   <div class="yvyue" @click="Yvyuehandle">立即预约</div>

 </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      description:'',
      image:'',
      price:'',
      sales:'',
      market:'',
    }
  },
  mounted() {
    this.title = this.$route.query.nm
    this.description = this.$route.query.des
    this.image = this.$route.query.img
    this.price = this.$route.query.pri
    this.sales = this.$route.query.sal
    this.market = this.$route.query.mar
    console.log(this.title)
  },
    methods: {
    Yvyuehandle() {
      
      this.$router.push({
     
        path: '/appointment',
      })
    }
  }
}

</script>

<style lang='stylus' scoped>
.kami{
  float left
  text-align center
  line-height .50rem
  height .50rem
  width 50%
  color #ff6110;
}
.yvyue{
  float left
  text-align center
  line-height .50rem
  height .50rem
  width 50%
  color #fff;
  background-color #ff6110;
}
.cont {
  height: 100%; 
}
.logo {
  height: 0.5298rem;

  ul {
    display: flex;
    padding: 0.0828rem 0.1656rem 0.0828rem 0.1656rem;

    li {
      font-size: 0.223rem;
      color: #3f3c3c;

      &:first-child {
        width: 0.26156rem;
        height: 0.23594rem;
        margin-right: 0.1028rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      &:nth-child(2) {
        height: 0.3519rem;
        flex: 1;

        img {
          height: 100%;
        }
      }

      &:nth-child(3) {
        padding: 0.03rem 0 0 0;
      }

      &:nth-child(4) {
        padding: 0.03rem 0.2rem 0 0.2rem;
      }

      &:nth-child(5) {
        padding: 0.03rem 0.05rem 0 0;
      }
    }
  }
}
.wzms{
  height 1.80rem
  margin-right 10px
  margin-left 10px
}
.xiangqing{
  height calc(100% - 1.0335rem);
  overflow-y scroll
}
.imgs{
width 100%;
}
img
  width 100% 
  height 100%
.price{
 color: #f8470d;
 font-size 28.125px
}
.market{
color rgb(102, 102, 102);
font-size 12px
}
.sales{
  color rgb(102, 102, 102);
  font-size 12px;
   float right

}
.title{
color rgb(51, 51, 51);
font-size 18px;
font-family: PingFangSC-Medium;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
        margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.description{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13px;
    font-family: PingFangSC;
    font-weight: 400;
    color: #999;
}
.third {
    margin-left 10px
    height 10px
    color: #333333;
    font-size: 13px;
    float right
  }
  .thirda  {
    height 20px;
    line-height 30px;
  }
</style>
